<template>
  <div class="rank">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="charContainer">
      <div class="rankChart" v-for="(item, index) in sortedChartData" :key="index">
        <span class="index-square" :style="getIndexStyle(index)">{{ index + 1 }}</span>
        <div class="progress-container">
          <div class="progress-text">
            <span class="label" :title="item.Name">{{ item.Name }}</span>
            <el-progress
              :percentage="getPercentage(item.Count)"
              :stroke-width="4"
              :show-text="false"
              :style="getProgressStyle(index)"
            />
            <span class="percentage" :title="item.Count">{{ item.Count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lRTitle from "./lRTitle.vue";

export default {
  name: "staffRank",
  props: {
    Select: {
      type: String,
      required: true // 确保 Select 属性被传递
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      statusTitle: ""
    };
  },
  watch: {},
  computed: {
    sortedChartData() {
      return [...this.chartData].sort((a, b) => b.Count - a.Count).slice(0, 10); // 只取前10条数据;
    },
    maxCount() {
      return Math.max(...this.sortedChartData.map((item) => item.Count));
    }
  },
  mounted() {
    this.initTitle();
  },
  beforeDestroy() {},
  methods: {
    initTitle() {
      this.statusTitle = this.Select === "left" ? "企业智库贡献人员排名" : "加速域名排名";
    },
    getPercentage(count) {
      if (this.maxCount === 0) return 0;
      return Math.round((count / this.maxCount) * 100);
    },
    getProgressStyle(index) {
      const colors = [
        "#ff7734", // 第一名
        "#ffc700", // 第二名
        "#e0a449" // 第三名
      ];
      const defaultColor = "#3fd190"; // 其他名次
      const backgroundColor = index < 3 ? colors[index] : defaultColor;

      return {
        width: "100%",
        "--el-progress-bar-color": backgroundColor
      };
    },
    getIndexStyle(index) {
      const colors = [
        "#ff7734", // 第一名
        "#ffc700", // 第二名
        "#e0a449" // 第三名
      ];
      const defaultColor = "#3fd190"; // 其他名次
      const backgroundColor = index < 3 ? colors[index] : defaultColor;

      return {
        backgroundColor: backgroundColor
      };
    }
  },
  components: {
    lRTitle
  }
};
</script>
<style scoped lang="scss">
.rank {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* background-color: aqua; */
  height: 24%;
  .charContainer {
    flex: 1;
    overflow: auto;
    margin: 0 5px 6px 40px;
  }
  .rankChart {
    display: flex;
    align-items: center;
    padding: 8px;
    /* background-color: aqua; */
  }
  .index-square {
    color: white;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    /* 去掉圆角，保持方形 */
  }
  .progress-text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  .label {
    color: #ccc;
    font-size: 14px;
    white-space: nowrap; /*不允许换行，防止影响布局 */
    overflow: hidden; /*超出后不允许出现滚动条，影响美观 */
    text-overflow: ellipsis; /*超出宽度的文字用省略号显示 */
    width: 25%;
  }

  .progress-container {
    flex-grow: 1;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .percentage {
    width: 20%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
    color: #ddd;
    font-size: 14px;
  }

  ::v-deep .el-progress-bar__outer {
    background-color: #e5e9f2;
  }

  ::v-deep .el-progress-bar__inner {
    background: var(--el-progress-bar-color);
  }
}
</style>
